<template>
  <div class="rule">
    <newNav :selNum="selNum"></newNav>
    <div class="rule-titleb">{{$t('user.M_home_rules')}}</div>
    <div class="rule-titles">{{$t('user.WhatisMeta')}}</div>
    <div class="margin20">{{$t('user.thebasicun')}}</div>
    <div class="margin20">{{$t('user.Inheollowing')}}</div>
    
    <div class="rule-titles">{{$t('user.WhatisMetaboard')}}</div>
    <div class="margin20">{{$t('user.ourfirstrelease')}}</div>
    <div class="margin20">{{$t('user.Metaboarhasix')}}</div>
    <div class="margin20">{{$t('user.unlimitedpromotional')}}</div>

    <div class="rule-titlet">{{$t('user.UsergeneratedpETH')}}</div>
    <div class="margin20">{{$t('user.ETHisdistrib')}}</div>
    <div class="margin20">{{$t('user.automaticallpledg')}}</div>
    <div class="margin20">{{$t('user.spentgovernance')}}</div>
    <div class="margin20">{{$t('user.developDEFI')}}</div>
    <div class="margin20">{{$t('user.orMFIepo')}}</div>

    <div class="rule-titlen">{{$t('user.Asshownin')}}</div>
    <div class="margin20 rule-num">
      <div>
        <div>{{$t('user.One')}}</div>
        <div>{{$t('user.Two')}}</div>
        <div>{{$t('user.Three')}}</div>
        <div>{{$t('user.Four')}}</div>
        <div>{{$t('user.Five')}}</div>
        <div>{{$t('user.Six')}}</div>
      </div>
      <div>
        <div>20%</div>
        <div>10%</div>
        <div>5%</div>
        <div>5%</div>
        <div>5%</div>
        <div>5%</div>
      </div>
    </div>
    <div class="margin20">{{$t('user.quantityof30')}}</div>
    <div class="rule-titlen">{{$t('user.numberofthings')}}</div>
    <div class="margin20">1.{{$t('user.Overstepping')}}</div>
    <div class="margin20">2.{{$t('user.choosewhethe')}}</div>
    <div class="margin20">3.{{$t('user.TeamRevenue')}}</div>
    <div class="margin20">4.{{$t('user.erevenue')}}</div>
    <div class="margin20">5.{{$t('user.Yourrelationship')}}</div>
    <div class="margin20">{{$t('user.TheMetaboarxtension')}}</div>

    <div class="rule-titles">{{$t('user.WhattMetapool')}}</div>
    <div class="margin20">{{$t('user.corproducAdopt')}}</div>
    <div class="margin20">{{$t('user.MFIistributedi')}}</div>
    <div class="margin20">Pool1 ：{{$t('user.StakeipETH')}}</div>
    <div class="margin20">Pool2 ：{{$t('user.Provisioh')}}</div>
    <div class="margin20">{{$t('user.Thecalculation')}}</div>
    <img class="img1" src="../assets/gongshi.jpg" alt="">

    <div class="rule-titles">{{$t('user.contribution')}}</div>
    <div class="margin20">{{$t('user.flectchemical')}}</div>
    <div class="margin20">{{$t('user.notInvitedTooltip')}}</div>
    <div class="margin20 rule-num2">
      <div>
        <div>{{$t('user.One')}}</div>
        <div>{{$t('user.Two')}}</div>
      </div>
      <div>
        <div>20%</div>
        <div>10%</div>
      </div>
    </div>

    <div class="rule-titles">{{$t('user.Thbespower')}}</div>
    <div class="margin20">{{$t('user.powernemechanism')}}</div>
    <div class="margin20">{{$t('user.Commonrange')}}</div>
    <div class="margin20">{{$t('user.intermedias')}}</div>
    <div class="margin20">{{$t('user.userthhmost')}}</div>

    <div class="rule-titles">{{$t('user.punishmentTime')}}</div>
    <div class="margin20">{{$t('user.pooleshan')}}</div>

    <div class="rule-titles">{{$t('user.punishmentCount')}}</div>
    <div class="margin20">{{$t('user.punishmentCountContent')}}</div>

    <div class="rule-titles">{{$t('user.WhatisMetapool')}}</div>
    <div class="margin20">{{$t('user.MFIgovernance')}}</div>
    <div class="margin20">
      <span class="rule-radius"></span>
      {{$t('user.PledgeMFIETH')}}
    </div>
    <div class="margin20">
      <span class="rule-radius"></span>
      {{$t('user.PledgMFIto')}}
    </div>
    <div class="margin20">
      <span class="rule-radius"></span>
      {{$t('user.MFvotingto')}}
    </div>
    <div class="margin20">
      <span class="rule-radius"></span>
      {{$t('user.MFITokensare')}}
    </div>
    <div class="margin20">
      <span class="rule-radius"></span>
      {{$t('user.Theprofitmargin')}}
    </div>
    <div class="rule-titles">{{$t('user.WhatisDAO')}}</div>
    <div class="margin20">{{$t('user.MetaDAOisour')}}</div>
    <div class="margin20">{{$t('user.MetaDAOcoming')}}</div>
    <div class="bottom-bai">
      <homeBottom></homeBottom>
    </div>    
  </div>
</template>

<script>
  import newNav from '../components/newNav'
  import homeBottom from '../components/public/homeBottom'
export default {
  name: 'metaboardRule',
  components:{ newNav,homeBottom },
  data () {
    return {
      selNum:4,
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .rule-radius{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .6);
    margin-right: 6px;
  }
   @media only screen and (min-width: 0px) and (max-width: 639px){
    .rule{
      width: 100%;
      padding: 0px 20px;
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      text-align: left;
      .bottom-bai{
        width: 100%;
        margin: 0 auto;
        padding-top:80px;
        padding-bottom: 20px;
      }
      .rule-num2,.rule-num{
        width: 100%;
        height: 90px;
        border: 1px solid rgba(255, 255, 255, .6);
        text-align: center;
        >div{
          display: flex;
          width: 100%;
          height: 45px;
          line-height: 45px;
          >div{
            width: 20%;
            border-right: 1px solid rgba(255, 255, 255, .6);
            border-bottom: 1px solid rgba(255, 255, 255, .6);
          }
          >div:nth-child(6){
            border-right: none;
          }
        }
        >div:nth-child(2){
          >div{
            border-bottom: none;
          }
        }
      }
      .rule-num2{
        width: 160px;
        >div{
          >div{
            width: 100%;
          }
          >div:nth-child(2){
            border-right: none;
          }
        }
      }
      .rule-titleb{
        text-align: center;
        padding: 60px 0px 40px 0px;
        font-size: 30px;
        color: #fff;
      }
      .rule-text1{
        line-height: 30px;
      }
      .rule-titles{
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        padding: 76px 0px 24px 0px;
      }
      .rule-titlet{
        font-size: 18px;
        color: #fff;
        font-weight: bold;
        padding: 15px 0px 24px 0px;
      }
      .margin39{
        margin-bottom: 39px;
        line-height: 24px;
      }
      .margin20{
        margin-bottom: 20px;
      }
      .img1{
        width: 100%;
        margin-bottom: 45px;
      }
      .img2{
        width: 100%;
        margin-bottom: 30px;
      }
      .rule-titlen{
        font-weight: bold;
        color: #fff;
        padding: 20px 0px;
      }
      .rule-exle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff;
        .rule-flex{
          width: 100%;
          height: 178px;
          border: 1px solid rgba(255,255,255,.3);
          display: flex;
          margin-bottom: 20px;
          >div:nth-child(1){
            width: 42px;
            text-align: center;
            line-height: 176px;
            border-right: 1px solid rgba(255,255,255,.3);
          }
          >div:nth-child(2){
            border-right: 1px solid rgba(255,255,255,.3);
            div{
              width: 146px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: rgba(255,255,255,.7);
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
          >div:nth-child(3){
            div{
              width: 158px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: #fff;
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
        }
      }
    }
   }
  @media only screen and (min-width: 639px){
    .rule{
      width: 800px;
      margin: 0 auto;
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      text-align: left;
      .bottom-bai{
        width: 1200px;
        margin: 0 auto;
        padding-top:80px;
        padding-bottom: 20px;
      }
      .rule-num2,.rule-num{
        width: 500px;
        height: 90px;
        border: 1px solid rgba(255, 255, 255, .6);
        text-align: center;
        >div{
          display: flex;
          width: 100%;
          height: 45px;
          line-height: 45px;
          >div{
            width: 20%;
            border-right: 1px solid rgba(255, 255, 255, .6);
            border-bottom: 1px solid rgba(255, 255, 255, .6);
          }
          >div:nth-child(6){
            border-right: none;
          }
        }
        >div:nth-child(2){
          >div{
            border-bottom: none;
          }
        }
      }
      .rule-num2{
        width: 160px;
        >div{
          >div{
            width: 100%;
          }
          >div:nth-child(2){
            border-right: none;
          }
        }
      }
      .rule-titleb{
        text-align: center;
        padding: 120px 0px 72px 0px;
        font-size: 30px;
        color: #fff;
      }
      .rule-text1{
        line-height: 30px;
      }
      .rule-titles{
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        padding: 76px 0px 24px 0px;
      }
      .rule-titlet{
        font-size: 18px;
        color: #fff;
        font-weight: bold;
        padding: 15px 0px 24px 0px;
      }
      .margin39{
        margin-bottom: 39px;
        line-height: 24px;
      }
      .margin20{
        margin-bottom: 20px;
      }
      .img1{
        width: 504px;
        margin-bottom: 45px;
      }
      .img2{
        width: 764px;
        margin-bottom: 30px;
      }
      .rule-titlen{
        font-weight: bold;
        color: #fff;
        padding: 20px 0px;
      }
      .rule-exle{
        width: 740px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff;
        .rule-flex{
          width: 350px;
          height: 178px;
          border: 1px solid rgba(255,255,255,.3);
          display: flex;
          >div:nth-child(1){
            width: 42px;
            text-align: center;
            line-height: 176px;
            border-right: 1px solid rgba(255,255,255,.3);
          }
          >div:nth-child(2){
            border-right: 1px solid rgba(255,255,255,.3);
            div{
              width: 146px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: rgba(255,255,255,.7);
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
          >div:nth-child(3){
            div{
              width: 158px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: #fff;
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
        }
      }
    }
  }
  
</style>
